<template>
  <div class="pad-out-box">
    <div>
      <el-table :border="true" :data="tableData">
        <el-table-column align="center" label="项目名称" prop="projectName" />
        <el-table-column align="center" label="合同名称" prop="contractName" />
        <el-table-column align="center" label="合同类型" prop="status">
          <template slot-scope="scope">
            <span>{{ getContractName(scope.row.contractType) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同开始时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractBeginDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同结束时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同状态" prop="status">
          <template slot-scope="scope">
            <span>{{ getStatusName(scope.row.contractStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" prop="remark">
          <template slot-scope="scope">
            <el-button type="text" @click="goPage(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination @change="pageChange" :total="total" />
    </div>
  </div>
</template>
<script>
  import { getMenuList } from '@/api';
  import { apiContrantPayList } from '../../../api/contract';
  import commonMixin from '../../../mixin';

  export default {
    mixins: [commonMixin],

    data() {
      return {
        activeNames: ['1'],
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1
      };
    },

    mounted() {
      this.getOptionList();
      this.getTableData();
    },

    methods: {
      //数据源
      async getTableData(type) {
        let res = await apiContrantPayList({
          pageSize: this.pageSize,
          currentPage: type ? this.currentPage : 1,
          status:1,
          ifContractManage:true
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      //分页
      pageChange(e) {
        this.currentPage = e.currentPage;
        this.pageSize = e.pageSize;
        this.getTableData('more');
      },
    },
  };
</script>
<style scoped>
  .split-line {
    width: 100%;
    height: 1px;
    margin: 10px 0 30px 0;
    background: #ccc;
    float: left;
  }
</style>
